<!-- src/views/home/components/DzxjItem DzxjItem.vue 2023/5/29  @wanghaoran -->
<!--电子巡检模块-->
<template>
  <div class="dzxj-item">
    <div>
      <div>
        <span class="dzxj-item-label">巡检人：</span>
        <span class="whr-primary-color">黄老师</span>
      </div>
      <div>
        <span class="dzxj-item-label">巡检时间：</span>
        <span class="whr-primary-color">17:00:00-17:15:19</span>
      </div>
    </div>
    <div>
      <div>
        <span class="dzxj-item-label">巡井井数：</span>
        <span class="whr-primary-color">367/475</span>
      </div>
      <div>
        <span class="dzxj-item-label">问题：</span>
        <span class="whr-red">3</span>
      </div>
    </div>
    <div class="dzxj-item-top-label" :class="[completed?'completed':'no-completed']">
      {{ completed ? '已完成' : '未完成' }}
    </div>
  </div>

</template>

<script setup>
const props = defineProps({
  completed: {
    type: Boolean,
    default: true,
  }
})
</script>

<style scoped>
@import "../assets/css/index.css";

.dzxj-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  line-height: 24px;
  border-top: 1px solid var(--el-border-color);
  padding-top: 6px;
  height: 60px;
  box-sizing: border-box;
}

.dzxj-item-label {
  min-width: 70px;
  display: inline-block;
}

.dzxj-item-top-label {
  position: absolute;
  top: 0px;
  right: 0;
  left: 0;
  margin: auto;
  color: white;
  font-size: 12px;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 50px;
  line-height: 17px;
}

.completed {
  background-color: #04CFAE;
}

.no-completed {
  background-color: #8F8F8F;
}
</style>